<template>
  <div>
    <base-layout ref="layout" @pageChange="pageChange" :buttonList="buttonList" :isPage="true" :showTitle="false"
      @onFuncBtn="getFuncBtn">
      <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
        <div flex style="position: absolute; top: 16px; left: 0px">
          <span style="display: block; padding: 4px 20px 0px; font-size: 14px;">定时器状态:</span>
          <!-- <el-switch v-model="enableStatus" disabled></el-switch> -->
          <div v-if="enableStatus">
            <tr>
              <td>
                <div class="bling">
                  <div class="bling-2" style="background-color: rgba(0,255,0, 1)"></div>
                  <div class="bling-3" style="background-color: rgba(0,255,0, 1)"></div>
                </div>
              </td>
              <td></td>
            </tr>
          </div>
          <div v-else>
            <tr>
              <td>
                <div class="bling">
                  <div class="bling-2" style="background-color: rgba(255, 0, 0, 1)"></div>
                  <div class="bling-3" style="background-color: rgba(255, 0, 0, 1)"></div>
                </div>
              </td>
              <td></td>
            </tr>
          </div>
        </div>
        <base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
          :tableHeight="tableHeight" :tableData="tableData" :tableColumn="tableColumn" :slotrow="true"
          @radioChange="radioChange" v-loading="LoadLoading">
          <template v-slot:state="{ row }">
            <el-switch v-model="row.row.state" active-color="#55aaff" @change="stageChange(row.row)"
              inactive-color="#ff4949">
            </el-switch>
          </template>
          <template v-slot:taskType="{ row }">
            <span>{{ row.row.taskType == "1" ? "间隔" : "定时" }}</span>
          </template>
          <template v-slot:fristTime="{ row }">
            <span>{{ formatTime(row.row.fristTime) }}</span>
          </template>
          <template v-slot:nextTime="{ row }">
            <span>{{ formatTime(row.row.nextTime) }}</span>
          </template>
        </base-table>
      </div>
    </base-layout>
    <!-- 权限设置弹窗 -->
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingsDialog"
      class="userDialog" :title="header + '定时任务信息'" width="520px" top="10vh">
      <el-form validate-on-rule-change :model="ruleForm" :rules="rules" class="formMain" ref="ruleForm"
        label-width="100px">
        <el-form-item prop="taskName">
          <span class="label" slot="label">任务名称</span>
          <el-input placeholder="请输入任务名称" clearable v-model="ruleForm.taskName">
          </el-input>
        </el-form-item>
        <el-form-item prop="taskFunction">
          <span class="label" slot="label">执行方法</span>
          <el-input clearable placeholder="请输入执行方法" v-model="ruleForm.taskFunction">
          </el-input>
        </el-form-item>
        <el-form-item prop="taskType">
          <span class="label" slot="label">执行方式</span>
          <el-radio v-model="ruleForm.taskType" label="1">间隔</el-radio>
          <el-radio v-model="ruleForm.taskType" label="2">定时</el-radio>
        </el-form-item>
        <el-form-item prop="taskValue">
          <span class="label" slot="label">数值</span>
          <el-input clearable placeholder="请输入数值" v-model="ruleForm.taskValue">
          </el-input>
        </el-form-item>
      </el-form>
      <div flex="cross:center main:right">
        <el-button type="primary" @click="confirmBtn">确认</el-button>
        <el-button @click="cancelBtn">取消</el-button>
      </div>
    </base-dialog>
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="logBox" class="userDialog"
      title="任务日志" width="1000px" top="10vh">
      <div class="select">
        <input type="text" placeholder="传参关键字" v-model="keyword" />
        <el-radio v-model="radio" label="1">成功</el-radio>
        <el-radio v-model="radio" label="0">失败</el-radio>
        <el-button type="primary" icon="el-icon-search" @click="logSearch">搜索</el-button>
      </div>
      <base-table v-loading="loading" ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
        :tableHeight="tableHeightLog" :tableData="tableLogData" :tableColumn="tabLog" @radioChange="radioChange">
      </base-table>
      <base-page :pageModel.sync="pageModelLog" @onPageChange="onPageChange"></base-page>
    </base-dialog>
  </div>
</template>

<script>
import baseTable from "@/components/base/baseTable";
import baseLayout from "@/components/base/baseLayout";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import basePage from "@/components/base/basePage";
import configData from "./configData";
// import taskLog from "./taskLog";
import {
  TimeTaskList,
  TimeTaskDetail,
  TimeTaskIncrease,
  TimeTaskDelete,
  TimeTaskEnable,
  TimeTaskDisable,
  TimeTaskSwitch,
} from "@/api/apis/timing";
export default {
  name: "Timing",
  components: {
    baseLayout,
    baseTable,
    baseDialog,
    basePage,
  },
  data() {
    return {
      radioIndex: false,
      radioId: false,
      loading: false,
      tableHeight: "calc(100vh - 189px)",
      tableHeightLog: "calc(100vh - 408px)",
      buttonList: [

        {
          icon: "",
          menuName: "查看执行日志",
        },
        {
          icon: "el-icon-video-play",
          menuName: "启动",
        },
        {
          icon: "el-icon-video-pause",
          menuName: "停用",
          type: "danger",
        },
      ],
      tabLoading: false,
      tableData: [],
      tableLogData: [],
      settingsDialog: false,
      logBox: false,
      pageModel: {
        page: 1,
        limit: 20,
        Sequence: "",
        SequenceName: "",
      },
      pageModelLog: {
        total: 0,
        page: 1,
        limit: 20,
      },
      pageLog: {
        page: "1", //页码
        limit: "20", //每页行数
        Sequence: "", //排序方式
        SequenceName: "", //需要排序的字段
        keyword: "", //传参关键字
        resultState: "", //执行状态 0-1
      },
      radioForm: {},
      ruleForm: {
        taskName: "", //任务名称
        taskFunction: "", // 执行方法
        taskType: "", // 执行方式
        taskValue: "", // 数值
      },
      rules: {
        r_RoleCode: [
          {
            required: true,
            message: "请输入角色编码",
            trigger: "blur",
          },
        ],
        r_RoleName: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
        ],
        r_Sort: [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
      header: "",
      keyword: "",
      radio: "",
      enableStatus: "",
      LoadLoading: false
    };
  },
  computed: {
    // 表头配置
    tableColumn() {
      return configData.tableColumnJson;
    },
    tabLog() {
      return configData.tableLogJson;
    },
  },
  mounted() {
    this.inPage();
  },
  methods: {
    // 页面初始化
    inPage() {
      this.getTable();
    },
    // 表格初始化
    resetTable() {
      this.pageModel.page = 1;
      this.radioId = false;
      this.radioIndex = false;
      this.$nextTick(() => {
        this.$refs.layout.pageClear();
      });
    },
    // 获取表格数据
    async getTable() {
      this.LoadLoading = true
      let params = {
        ...this.pageModel,
      };
      let res = await TimeTaskList(params);
      if (res.success === "true") {
        this.tableData = res.data[1];
        this.tableData.forEach((el) => {
          el.state = el.state == 1 ? true : false;
        });
        this.enableStatus = res.data[2];
        this.LoadLoading = false
      }
      this.$nextTick(() => {
        this.$refs.layout.setPageTotal(res.data[0]);
      });
    },
    // 获取任务日志数据
    async TimeTaskDetail(taskID) {
      this.loading = true;
      let params = {
        ...this.pageLog,
        taskID,
      };
      let res = await TimeTaskDetail(params);
      if (res.success === "true") {
        this.tableLogData = res.data[1];
        this.tableLogData.forEach((el) => {
          el.resultState = el.resultState == "1" ? "成功" : "失败";
          el.isSolve = el.isSolve == "0" ? "未处理" : "已处理";
        });
        this.$nextTick(() => {
          this.pageModelLog.total = res.data[0];
        });
      }
      this.loading = false;
    },
    // 查询、筛选事件
    pageChange(model) {
      // console.log(model);
      this.pageModel.page = model.page;
      this.pageModel.limit = model.limit;
      this.getTable();
    },
    // 日志查询、筛选
    onPageChange() {
      this.pageLog.page = this.pageModelLog.page;
      this.pageLog.limit = this.pageModelLog.limit;
      this.TimeTaskDetail(this.radioId);
    },
    logSearch() {
      this.pageLog.keyword = this.keyword;
      this.pageLog.resultState = this.radio;
      this.TimeTaskDetail(this.radioId);
    },
    // 点击单元格
    radioChange(val) {
      this.radioIndex = val.index;
      this.radioId = val.billid;
      let executionMode = val.taskTypeName == "间隔" ? "1" : "2";
      let enable = val.state == true ? "1" : "0";
      this.radioForm = {
        ...val,
        taskType: executionMode,
        state: enable,
      };
    },
    // 按钮点击事件
    getFuncBtn(btnEven) {
      if (btnEven.menuName == "新增") {
        this.header = "新增";
        this.settingsDialog = true;
      }
      if (btnEven.menuName == "编辑") {
        if (this.radioIndex === false) {
          this.$vmNews("请选择一条记录");
        } else {
          this.header = "编辑";
          this.ruleForm = Object.assign({}, this.radioForm);
          this.settingsDialog = true;
        }
      }
      if (btnEven.menuName == "查看执行日志") {
        if (this.radioIndex === false) {
          this.$vmNews("请选择一条记录");
        } else {
          this.logBox = true;
          this.TimeTaskDetail(this.radioId);
        }
      }
      if (btnEven.menuName == "删除") {
        if (this.radioIndex === false) {
          this.$vmNews("请选择一条记录");
        } else {
          this.$confirm("确认删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.delData(this.radioId);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消操作",
              });
            });
        }
      }
      if (btnEven.menuName == "启动") {
        this.TimeTaskEnable();
      }
      if (btnEven.menuName == "停用") {
        this.TimeTaskDisable();
      }
    },
    // 确定
    async confirmBtn() {
      let params;
      if (this.header == "新增") {
        params = {
          ...this.ruleForm,
          billid: "00000000-0000-0000-0000-000000000000",
        };
      } else if (this.header == "编辑") {
        params = {
          ...this.ruleForm,
        };
      }
      let pass;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          pass = true;
        } else {
          pass = false;
        }
      });
      if (pass) {
        try {
          let res = await TimeTaskIncrease({
            dataMain: params,
          });
          if (res.code == 1) {
            this.$vmNews("保存成功", "success");
            this.ruleForm = [];
            this.getTable();
            this.settingsDialog = false;
          }
        } catch (error) {
        }
      } else {
        return;
      }
    },
    // 取消
    cancelBtn() {
      this.settingsDialog = false;
    },
    // 删除
    async delData(id) {
      let res = await TimeTaskDelete({ id });
      if (res.code == 1) {
        this.$vmNews("删除成功", "success");
        this.$refs.customtable.clearRadioIndex();
        this.radioIndex = false;
        this.radioForm = {};
        this.getTable();
      }
    },
    // 启用
    async TimeTaskEnable() {
      let res = await TimeTaskEnable({});
      if (res.code == 1) {
        this.$vmNews("启用成功", "success");
        this.getTable()
      }
    },
    // 停用
    async TimeTaskDisable() {
      let res = await TimeTaskDisable({});
      if (res.code == 1) {
        this.$vmNews("停用成功", "success");
        this.getTable()
      }
    },
    async stageChange(state) {
      let res = await TimeTaskSwitch({
        id: state.billid,
        state: state.state.toString(),
      });
      if (res.code == 1) {
        if (state.state == true) {
          this.$vmNews("启用成功", "success");
        } else {
          this.$vmNews("停用成功", "success");
        }
      }
    },
    formatTime(row) {
      return row && row.substring(0, 10);
    },
  },
};
</script>

<style scoped>
.select {
  margin-bottom: 20px;
}

.select input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  margin-right: 5px;
}

.select input:focus {
  border: 1px solid #409eff;
}

.bling-2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c800a0e9, endcolorstr=#c800a0e9);
  animation: blings 0.7s linear infinite;
  opacity: 0.5;
}

.bling-3 {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f00a0e9, endcolorstr=#7f00a0e9);
  animation: blings-3 0.7s linear infinite;
  position: absolute;
  left: -5px;
  top: -5px;
}

.bling {
  position: relative;
}

@keyframes blings-3 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  25% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@-moz-keyframes blings-3 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  25% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@-webkit-keyframes blings-3 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  25% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@-o-keyframes blings-3 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  25% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
</style>
